<template>
  <div class="chain-index-container">
      <div class="banner">
            <img src="./../.././static/img/chain/bg1.jpg" alt="">  
             
      </div>
      <div class="info-1200">
           <!-- 选择 -->
            <div class="chain-choose-container">
                <a-form layout="inline" :form="form">
                    <a-form-item label='货品类型：'>
                        <a-select placeholder="绿色食品类型" :defaultValue="type" v-model="type" style="width: 190px;height:40px;" @change="transTypeChange">
                            <a-select-option v-for="(item,index) in highwayList" :key="index" :value="item.dictKey">{{item.dictValue}}</a-select-option>
                        </a-select>
                    </a-form-item>
                    <a-form-item label='关键字：'>
                        <a-input v-decorator="['userName',{rules: [{message: 'Please input your username!' }]} ]" placeholder="请输入关键字" style='width:190px;height:40px;'>
                        </a-input>
                    </a-form-item>
                    <a-form-item>
                          <a-button class='ant-btn-primary' type="primary">搜索</a-button>
                    </a-form-item>
                    <a-form-item>
                          <a-button>重置</a-button>
                    </a-form-item>
              <!--       <a-form-item style='margin-right:20px; float:right;'>
                          <a-button class='ant-btn-danger ' type="danger">发布供应信息</a-button>
                    </a-form-item>
                    <a-form-item style='float:right;'>
                          <a-button class='ant-btn-danger ' type="danger">发布求购信息</a-button>
                    </a-form-item> -->
                </a-form>
            </div>
            <div class="chain-selloffer">
                  <div class="same-title">
                      <span></span>
                      <span>供应信息</span>
                      <nuxt-link to="/chain/sellOffer">更多信息</nuxt-link>
                  </div>
                  <div class="list-data">
                    <div class="list-data-title">
                        <ul>
                              <li>标题</li>
                              <li>货品信息</li>
                              <li>供应商</li>
                              <li>发布时间</li>
                        </ul>
                    </div>
                    <a-list itemLayout="vertical" size="large" :pagination="pagination" :dataSource="supplyList" class='data-list'>
                          <a-list-item slot="renderItem" slot-scope="item, index" key="item.title">
                              <nuxt-link :to="`/chain/sellOffer/${item.id}`">
                                  <ul>
                                    <li>{{item.title}}</li>
                                    <li>{{item.tagName}}</li>
                                    <li>{{item.company}}</li>
                                    <li>{{item.dataTime}}</li>
                                   </ul>
                              </nuxt-link>
                          </a-list-item>
                    </a-list>
                  </div>
                  <div class="sell-pic">
                        <img src="./../.././static/img/chain/food-1.jpg" alt="">
                  </div>
            </div>
            <!-- 求购信息 -->
            <div class="chain-selloffer chain-buyoffer">
                  <div class="same-title">
                        <span></span>
                        <span>求购信息</span>
                        <nuxt-link to="/chain/buyOffer">更多信息</nuxt-link>
                  </div>
                  <div class="list-data">
                    <div class="list-data-title">
                        <ul>
                            <li>标题</li>
                            <li>货品信息</li>
                            <li>供应商</li>
                            <li>发布时间</li>
                        </ul>
                    </div>
                    <a-list itemLayout="vertical" size="large" :pagination="pagination" :dataSource="purchList" class='data-list'>
                          <a-list-item slot="renderItem" slot-scope="item, index" key="item.title">
                              <nuxt-link :to="`./chain/buyOffer/${item.id}`">
                                <ul>
                                    <li>{{item.title}}</li>
                                    <li>{{item.tagName}}</li>
                                    <li>{{item.company}}</li>
                                    <li>{{item.dataTime}}</li>
                                </ul>
                              </nuxt-link>
                          </a-list-item>
                    </a-list>
                  </div>
                  <div class="sell-pic">
                          <img src="./../.././static/img/chain/food-2.jpg" alt="">
                  </div>
            </div>
      </div>
  </div>
</template>

<script>
import { chainData } from './../../utils/chainData'
export default {
    data() {
      return {
        tabKey: 1,
        supplyList: chainData.supply.slice(0,6),
        purchList: chainData.purch.slice(0,6),
        pagination: {
          defaultCurrent: 1,
          defaultPageSize: 10,
          showSizeChanger: true,
          hideOnSinglePage:true,
          total:10
        },
        type: '',
        highwayList: [],
    }
  },
    beforeCreate() {
    this.form = this.$form.createForm(this);
  },
  created :function(){
    const _type = this.$route.query.type;
    if ( _type ) this.type = parseInt(_type);
    this.infoCommonDict(29)

  },
  methods: {
         // 字典表接口 
      async infoCommonDict (type) {
          const res = await this.$store.dispatch('infoCommonDict',{
            dictType: type,
            pageSize: 99,
            pageNum: 1
          })
          if (res.status) {
            switch(type){
              case 29: this.highwayList = res.data.rows; break;
            }
          } 
      },
    async sellOfferList () {
      
    }
   
  },
}
</script>
<style lang="scss">
@import "../../assets/css/chain/chain.scss";
.chain-tab-menu{
   width: 160px;
   height:56px;
   line-height:55px;
   .ant-menu-submenu-title{
      margin:0 !important;
      height:56px !important;
      line-height:56px !important;
      padding:0 25px !important;
      span{
          color:#FFFFFF !important;
      }
    }
     li{
       border-bottom:1px solid rgba(254,254,254,0.4);
    }
    .ant-menu-submenu-active,.ant-menu-submenu-title:hover{
       background:#FFFFFF !important;
       color:#15837A !important;
    }
     .ant-menu-submenu-active,.ant-menu-submenu-title:active{
          background:none !important;
    }
    .ant-menu-submenu-active,.ant-menu-submenu-title:hover span{
      color:#15837A !important;
    }
    .ant-menu-submenu-active,.ant-menu-submenu-title:hover i{
      color:#15837A !important;
    }
  .ant-menu-submenu-arrow{
     display: none;
  }
  span{
      font-size:16px;
      color:#FFFFFF;
      display:inline-block;
  }
  i{
    font-style:normal;
    font-size:14px;
    color:#FFFFFF;
    margin-left:10px;
  }
}
.chain-tab-item{
    width:300px;
    position: absolute !important;
    left: -4px !important;
    background: #ffffff !important;
    top: -4px !important;
    color: #333333;
    height: auto !important;
    margin: 15px 0 0 0;
    padding: 0px !important;
    text-align: center;
   .ant-col-8{
      border-right: 1px solid #dddddd;
      text-align: center;
      margin:0px 0 20px 0;
      line-height: 22px;
    }
    a{
      color: #333333;
      font-size:14px;
    }
    .ant-col-8:nth-child(1){
        margin-top:20px;
    }
    .ant-col-8:nth-child(2){
        margin-top:20px;
    }
    .ant-col-8:nth-child(3){
        margin-top:20px;
    }
}
</style>
